<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DragonBones Demos - Hilo Example</title>
    <style>
        body,ul,li, h1{
            margin: 0;
            padding: 0;
        }

        h1{
            width: 100%;
            margin-top:5px;
            text-align: center;
        }

        #navContainer{
            position: absolute;
            left: 5px;
            top: 5px;
            list-style: none;
            width:150px;
        }

        #navContainer li{
            font-size: 20px;
            line-height: 40px;
            height: 40px;
            margin: 1px 1px;
            cursor: pointer;
            text-align: center;
        }

        #navContainer li a{
            color:#000;
            text-decoration: none;
        }

        #navContainer li.active{
            background: #ddd;
        }

        #navContainer li:hover{
            background: #ccc;
        }

        #animContainer{
            position: absolute;
            left:200px;
            top:40px;
        }

        canvas{
            border: 1px solid #000;
        }

        #githubLink{
            position: absolute;
            top:0px;
            right: 0px;
        }

        #forkMe{

        }
    </style>
</head>
<body>
    <h1>点击切换骨骼动画(素材来自DragonBones官网)</h1>
    <div id='animContainer'></div>
    <ul id='navContainer'></ul>
    <script src='../../../../build/standalone/hilo-standalone.min.js'></script>
    <script src='../../../../build/dragonbones/dragonbones.min.js'></script>
    <script src='./utils.js'></script>
    <script src='./demo.js'></script>
    <script>
        var animPosDict = {
            dragon:[550, 550],
            cocos:[500, 800],
            anim:[600, 500],
            spine:[600, 630]
        }
        var animList = [];
        for(var animName in animPosDict){
            animList.push(animName);
        }

        var keys = utils.getUrlKey();
        var animName = keys.anim;
        demo.pos = animPosDict[animName];
        demo.init(animName);

        (function initNav(){
            var navElem = document.getElementById('navContainer')
            animList.forEach(function(name){
                var elem = document.createElement('li');
                elem.innerHTML = '<li><a href="javascript:void(0)">' + name + '</a></li>';
                navElem.appendChild(elem);
                elem.onclick = function(){
                    keys.anim = name;
                    utils.setUrlKey(keys);
                };
                if(name === animName){
                    elem.className = 'active';
                }
            });
        })();
    </script>
</body>
</html>
